<template>
  <div>
    <el-tabs tab-position="top" v-if="hasTopic">
      <el-tab-pane :label="topic.deptName"  v-for="(topic,index) in topicList" :key="index">
        <el-row>
          <el-col :span="2" offset="1">
            <lable class="topic-description-label">会商标题: </lable>
          </el-col>
          <el-col :span="20">
            {{topic.title}}
          </el-col>
        </el-row>
        <el-row class="topic-description-el-row">
          <el-col :span="2" offset="1">
            <lable class="topic-description-label">会商内容: </lable>
          </el-col>
          <el-col :span="20">
            {{topic.description}}
          </el-col>
        </el-row>
        <message-detail :topic-id="topic.topicId"></message-detail>
      </el-tab-pane>
    </el-tabs>

    <!--  没有话题-->
    <div v-if="!hasTopic" style="text-align: center;font-size: 18px;color: #3333;height: 140px;line-height: 140px;">
      暂无数据
    </div>
  </div>
</template>

<script>
  import messageDetail from "@/components/topic/message/detail.vue";

  export default {
    name: "topicDetail",
    components:{
      messageDetail
    },
    props:{
      topicList:Array
    },
    data(){
      return{
        hasTopic:false
      }
    },
    watch:{
      topicList:function(val,oldVal){
        this.hasTopic = (val != null && val.length > 0);
      }
    },
  }
</script>

<style scoped>
  .topic-description-el-row{
    border-bottom: 1px solid #ddd
  }

  .topic-description-label{
    display:inline-block;
    font-weight: bold;
  }
</style>
